<template>
  <el-container class="eid-management-container">
    <el-card class="eid-management-card">
      <h2>评论管理</h2>
      <el-table :data="list" style="width: 100%; margin-top: 20px">
        <el-table-column prop="username" label="用户姓名"></el-table-column>
        <el-table-column prop="content" label="评论"></el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.total"
      />
    </el-card>
  </el-container>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as api from "@/api/comment.js";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import upload from "@/components/upload";
const store = useStore();
const showDialog = ref(false);
const selectedModel = ref({});
const list = ref([
  // 更多申请记录
]);
const open = () => {
  showDialog.value = true;
};
const viewDetails = (item) => {
  selectedModel.value = { ...item };
  open();
  // 实现查看申请详情的逻辑
};
const cancel = () => {
  showDialog.value = false;
  selectedModel.value = {};
};
const submit = async () => {
  const fn = selectedModel.value.discussId ? api.updateItem : api.addItem;
  const courseId = selectedModel.value.discussId
    ? selectedModel.value.discussId
    : null;
  const { code, message } = await fn({ ...selectedModel.value, discussId });
  if (code !== 200) {
    ElMessage.warning(message);
    return;
  }
  await getList();
  cancel();
};
const pager = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
const handleSizeChange = (newSize) => {
  pager.value.pageSize = newSize;
  pager.value.pageNum = 1; // Reset to first page on size change
  getList();
};

const handleCurrentChange = (newPage) => {
  pager.value.pageNum = newPage; // Reset to first page on size change
  getList();
};
const getList = async () => {
  const {
    pageNum,
    pageSize,
    list: arr,
    total,
  } = await api.getList({
    ...pager.value,
    params: {},
  });

  pager.value = {
    pageNum,
    pageSize,
    total,
  };
  list.value = arr.map((i) => ({
    ...i.discuss,
    ...i.albumVo,
    ...i.userVo,
  }));
};
const del = async ({ discussId }) => {
  await api.delItem(discussId);
  await getList();
};
getList();
</script>

<style scoped>
.eid-management-container {
  padding: 30px;
}

.eid-management-card {
  width: 100%;
}

h2 {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>